import { SettingOutlined } from '@ant-design/icons';
import { Dropdown, message } from 'antd';
import { SelectLang, useModel } from '@umijs/max';
import { setMenuCollapsedStatus } from '@/utils/systemConfigManegerUtils';
import { isFullscreen, toggleFullscreen } from '@/utils/fullscreenUtils';
import { useToken } from '@ant-design/pro-components';
import React from 'react';

const Setting: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { token } = useToken();
  return (
    <Dropdown
      trigger={['click']}
      placement="topLeft"
      menu={{
        onClick: ({ key }) => {
          switch (key) {
            case 'collapsed':
              setMenuCollapsedStatus(!initialState?.collapsed);
              setInitialState({
                ...initialState,
                collapsed: !initialState?.collapsed,
              });
              break;
            case 'fullscreen':
              toggleFullscreen().finally(() => {
                setInitialState({
                  ...initialState,
                  fullscreen: isFullscreen(),
                });
              });
              break;
            case 'immersionMode':
              if (!initialState?.immersionMode) {
                message.info('按 esc 退出沉浸模式');
              }
              setInitialState({
                ...initialState,
                immersionMode: !initialState?.immersionMode,
              });
              break;
          }
        },
        items: [
          {
            key: 'collapsed',
            label: <span>{initialState?.collapsed ? '展开' : '折叠'}菜单</span>,
            disabled: initialState?.immersionMode,
          },
          {
            key: 'fullscreen',
            label: <span>{initialState?.fullscreen ? '取消全屏' : '全屏'}</span>,
            disabled: !document.fullscreenEnabled,
          },
          {
            key: 'immersionMode',
            label: <span>{initialState?.immersionMode ? '退出' : ''}沉浸模式</span>,
          },
          {
            type: 'divider',
          },
          {
            key: 'selectLang',
            label: (
              <SelectLang
                icon={
                  <span
                    style={{
                      fontSize: token.fontSize,
                    }}
                  >
                    语言切换
                  </span>
                }
                {...{
                  placement: 'topLeft',
                  style: {
                    padding: 0,
                  },
                }}
              />
            ),
          },
        ],
      }}
    >
      <SettingOutlined
        style={{
          fontSize: token.fontSizeLG,
          color: token.colorIcon,
        }}
      />
    </Dropdown>
  );
};
export default Setting;
